<template>
  <view class="contact-detail">
    <view class="header">
      <u-image :src="contact.avatar"  width="120rpx" height="120rpx" shape="circle"></u-image>
      <view class="info">
        <text class="name">{{contact.name}}</text> 
        <text class="meta">{{contact.age}} 岁 | {{contact.height}}cm  | {{contact.education}}</text> 
        <text class="meta">{{contact.hometown}}  | {{contact.workCity}}</text> 
      </view>
    </view>
    
    <view class="bio">
      <text>{{contact.bio}}</text> 
    </view>
    
    <view class="contact-methods">
      <u-grid :col="2" :border="false">
        <u-grid-item @click="copyWechat">
          <u-icon name="weixin-fill" size="40" color="#09BB07"></u-icon>
          <text>微信号</text>
        </u-grid-item>
        <u-grid-item @click="callPhone">
          <u-icon name="phone-fill" size="40" color="#2979ff"></u-icon>
          <text>电话联系</text>
        </u-grid-item>
      </u-grid>
    </view>
    
    <view class="actions">
      <u-button v-if="!contact.followed"  type="primary" @click="$emit('follow', contact.id)"> 
        关注
      </u-button>
      <u-button v-else type="warning" @click="$emit('unfollow', contact.id)"> 
        取消关注
      </u-button>
      <u-button type="success" @click="$emit('send-message', contact.id)"> 
        发送留言
      </u-button>
      <u-button @click="$emit('close')">
        关闭
      </u-button>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    contact: {
      type: Object,
      required: true
    }
  },
  methods: {
    copyWechat() {
      uni.setClipboardData({ 
        data: this.contact.wechat, 
        success: () => {
          this.$u.toast(' 已复制微信号')
        }
      })
    },
    callPhone() {
      uni.makePhoneCall({ 
        phoneNumber: this.contact.phone.toString(), 
        success: () => {
          console.log(' 拨打电话成功')
        },
        fail: () => {
          this.$u.toast(' 拨打电话失败')
        }
      })
    }
  }
}
</script>

<style scoped>
.contact-detail {
  padding: 30rpx;
  width: 600rpx;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.info {
  margin-left: 20rpx;
}

.name {
  font-size: 36rpx;
  font-weight: bold;
  display: block;
}

.meta {
  font-size: 24rpx;
  color: #909399;
  display: block;
}

.bio {
  padding: 20rpx 0;
  border-top: 1rpx solid #eee;
  border-bottom: 1rpx solid #eee;
  margin-bottom: 30rpx;
}

.actions {
  margin-top: 40rpx;
}

.actions button {
  margin-bottom: 20rpx;
}
</style>